<template>
  <div>
    <div class="top">
      <p class="text">公告通知</p>
    </div>
    <div class="main" v-for="(item, index) in items" :key="index">
      <el-button
          @click="dialogShow(item.id)" 
          type="text" size="large" 
          class="content change-font" 
          style="margin-left: 20px;">
        {{item.title}}
      </el-button>
      <div class="content" style="position: absolute; margin-left: 850px; margin-top: 25px;
           color: rgb(161, 161, 161);">
        {{item.publishTime}}
      </div>
    </div>
  </div>
   <el-dialog 
      draggable
      :model-value="dialog.show"
      width="1000px"
      :before-close="handleClose"
      :close-on-click-modal="false">
     <Detail
      v-if="dialog.show"
      @getTableData="getTableData"
      v-model:show="dialog.show"
      :id="dialog.id"
     />
  </el-dialog>
</template>
<script setup>
import { ref,reactive } from 'vue'
import {get} from '@/plugins/axios'
import Detail from './detail.vue';
import { Path } from '@/constant/index'
const items = ref([])
const dialog = reactive({
  show:false,
  title:'',
  id:null,
});
getItems()
function getItems(){
  get( Path.noticeGetByUid ,null,content => {
      items.value = content
  })
}
function dialogShow(id){
    dialog.id = id
    dialog.show = true
}
function handleClose(){
    // 将表单隐藏
    dialog.id = null
    dialog.show = false
} 
</script>
<style scoped lang='scss'>
  .top{
    height: 40px;
    width: 80%;
    display: flex;
    border-radius: 10px; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
    background-color: rgb(249, 249, 249);  
    .text{
      margin-top: auto;
      margin-bottom: auto;
      margin-left: 40px;
      font-size: larger;
    }
  }
  .main{
    box-sizing: border-box;
    margin-top: 20px ;
    height: 60px;
    width: 80%;  
    display: flex;
    border-radius: 10px;  
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);  
    background-color: rgb(249, 249, 249); 
  }
  .content{
    margin-top: auto;
    margin-bottom: auto;
  }
  .change-font{
    font-size:larger ;
    color: rgb(161, 161, 161);
    text-decoration: underline;
  }
</style>